<template>
    <div class="tag-detail-box"  v-loading="loading">
        <div class="form-box">
            <el-form
                :model="detail"
                ref="ruleForm"
                hide-required-asterisk
                class="input-no-border-box"
                style="max-width:600px"
                label-width="100px">
                <el-form-item label="游戏类型">
                    <span>{{detail.categoryName}}</span>
                </el-form-item>
                <el-form-item label="标签">
                    <span>{{detail.tagName}}</span>
                </el-form-item>
                <el-form-item label="展示数" style="width:400px">
                    <el-input v-model.number="detail.showCount" type="number"></el-input>
                </el-form-item>
            </el-form>

            <topTitle title="排行榜"/>
            <span>筛选：</span>
            <el-input v-model.trim="filterStr" clearable @keyup.enter.native="titleFilter" @input="titleFilter" style="width:200px;margin-bottom:10px"  placeholder="根据游戏标题进行搜索"></el-input>

            <span style="margin-left:20px">查询总条数：</span>
            <el-input style="width:120px;" @keyup.enter.native="getDetail" @change="getDetail" v-model.number="limit" type="number"></el-input>
            <div class="table-box">
                <el-table
                    :data="list"
                    border
                    style="width: 100%">
                    <el-table-column
                        width="80"
                        prop="id"
                        label="当前顺序">
                        <template slot-scope="scope">
                            <!-- <div>{{scope.$index + 1}}</div> -->
                            <div>{{scope.row._sort}}</div>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="systemSort"
                        label="系统顺序">
                    </el-table-column>
                    <el-table-column
                        prop="gameid"
                        label="游戏id">
                    </el-table-column>
                    <el-table-column
                        prop="icon"
                        label="游戏icon">
                        <template slot-scope="scope">
                            <div class="app-icon">
                                <img :src="scope.row.icon" alt="">
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="游戏名称">
                        <template slot-scope="scope">
                            <span class="go-detail-btn" @click="goGameDetail(scope.row.gameid)">{{scope.row.gameName || scope.row.gameid}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="gameTitle"
                        label="标题">
                    </el-table-column>
                    <el-table-column
                        prop="gameScore"
                        label="评分">
                    </el-table-column>
                    <el-table-column
                        prop="downloadNum"
                        label="热度">
                    </el-table-column>
                    <el-table-column
                        width="200"
                        label="权重">
                        <template slot-scope="scope">
                            <el-input @change="numChange" v-model.number="scope.row.weight" type="number"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="id"
                        width="120"
                        label="操作">
                        <template slot-scope="scope">
                            <el-button type="text" @click="resetWeight(scope.row)">重置</el-button>
                            <el-button type="text" @click="delGame(scope.row)" style="color:red;">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>

        <div v-if="changeNum > 1" class="btn-box">
            <el-button class="btn" @click="notSave">取消</el-button>
            <el-button type="success" class="btn" @click="save">保 存</el-button>
        </div>
    </div>
</template>

<script>
export default {
    data () {
        return {
            loading: false,
            detail: {
                categoryName: '', // 类型名
                tagName: '', // 标签名
                showCount: 100, // 展示数
                gameRankWeightDataVoList: []
            },
            limit: 100,
            list: [],
            filterStr: '', // 过滤条件
            changeNum: 0
        }
    },

    watch: {
        detail: {
            handler () {
                this.changeNum++
            },
            deep: true
        }
    },

    created () {
        if (this.$route.query.id) {
            this.getDetail()
        }
    },

    methods: {
        // 获取详情
        async getDetail () {
            if (this.loading) return
            this.loading = true
            this.changeNum = 0
            let res = await this.$http.post('/game/selectRankWeight', {
                configId: this.$route.query.id,
                limit: this.limit
            })
            if (res.code === '0') {
                res.data.gameRankWeightDataVoList.sort((a, b) => {
                    let Anum = a.weight + a.downloadNum
                    let Bnum = b.weight + b.downloadNum
                    return Bnum - Anum
                })
                res.data.gameRankWeightDataVoList.forEach((item, index) => {
                    item.status = 1
                    item._sort = index + 1
                })
                this.currentDetail = JSON.parse(JSON.stringify(res.data))
                this.detail = res.data
                this.list = this.detail.gameRankWeightDataVoList
            } else {
                this.$message({
                    type: 'error',
                    message: res.desc
                })
            }
            this.loading = false
        },

        // 根据游戏标题进行筛选
        titleFilter () {
            if (!this.filterStr) {
                this.list = this.detail.gameRankWeightDataVoList.filter(item => item.status === 1)
                return
            }
            if (this.loading) return
            this.loading = true
            this.list = this.detail.gameRankWeightDataVoList.filter(item => {
                return item.status === 1 && item.gameName.includes(this.filterStr)
            })
            this.loading = false
        },

        // 权重改变，启动重排
        numChange () {
            // 将全部数据重排
            this.detail.gameRankWeightDataVoList.sort((a, b) => {
                let Anum = a.weight + a.downloadNum
                let Bnum = b.weight + b.downloadNum
                return Bnum - Anum
            })

            // 过滤已删除
            let sortList = this.detail.gameRankWeightDataVoList.filter(item => item.status === 1)

            // 给现有添加排序
            sortList.forEach((item, index) => {
                item._sort = index + 1
            })

            // 现有重排
            this.list.sort((a, b) => {
                return a._sort - b._sort
            })
        },

        // 删除游戏
        delGame (item) {
            item.status = 0
            this.list = this.detail.gameRankWeightDataVoList.filter(item => item.status === 1)
            this.list.forEach((item, index) => {
                item._sort = index + 1
            })
        },

        // 重置权重 触发重排
        resetWeight (item) {
            item.weight = 0
            this.numChange()
        },

        // 取消保存
        notSave () {
            // 初始化状态
            this.changeNum = 0
            this.filterStr = ''
            this.detail = JSON.parse(JSON.stringify(this.currentDetail))
            this.list = this.detail.gameRankWeightDataVoList
        },

        // 保存
        async save () {
            let res = await this.$http.post('/game/updateRankWeight', this.detail)
            if (res.code === '0') {
                // this.detail.gameRankWeightDataVoList = this.list
                this.currentDetail = JSON.parse(JSON.stringify(this.detail))
                this.changeNum = 1
                this.$message({
                    type: 'success',
                    message: '保存成功'
                })
            } else {
                this.$message({
                    type: 'error',
                    message: res.desc
                })
            }
        },

        // 查看游戏详情
        goGameDetail (id) {
            const { href } = this.$router.resolve({
                path: '/game/gameDetail',
                query: {
                    id
                }
            })
            window.open(href, '_blank')
        }
    }
}
</script>

<style lang="scss" scoped>
    .tag-detail-box {
        display: flex;
        height: 100%;
        flex-direction: column;
        .form-box {
            flex: 1;
            overflow-y: scroll;
            .table-box {
                .app-icon {
                    width: 60px;
                    height: 60px;
                    > img {
                        width: 100%;
                        height: 100%;
                    }
                }
                .go-detail-btn {
                    color: #409EFF;
                    cursor: pointer;
                    &:hover {
                        text-decoration: underline;
                    }
                }
            }
        }
        .btn-box {
            height: 70px;
            display: flex;
            align-items: center;
            border-top: 1px solid #EBEEF5;
            .btn {
                margin-right: 20px;
            }
        }
    }
</style>
